<template>
  <div class="search-wrapper">
    <div class="search-wrap">
      <!-- 模板选择 -->
      <div class="search-title">
        <div class="search-title-r">
          <span class="search-title-label">模板：</span>
          <el-select v-model="tempValue" placeholder="请选择">
            <el-option
              v-for="item in templateList"
              :key="item.mobanid"
              :label="item.mobanmc"
              :value="item.mobanid"
            />
          </el-select>
          <el-button size="medium">
            <i class="fa fa-th-list" />自定义模板新建和编辑
          </el-button>
        </div>
      </div>
      <!-- 关键字及表达式 -->
      <div class="search-filter">
        <div class="search-filter-title">高级检索输入</div>
        <div class="search-filter-params">
          <div class="search-filter-params-t">
            <el-autocomplete
              v-model="keyWord"
              :fetch-suggestions="querySearchAsync"
              :trigger-on-focus="false"
              @click="handleKeyWordSelect"
              placeholder="请输入内容"
            />
            <el-button size="medium" type="primary">
              <i class="fa fa-search" />检索
            </el-button>
            <el-button size="medium">
              <i class="fa fa-trash-o" />清除全部检索条件
            </el-button>
          </div>
          <!-- 检索类型 -->
          <div class="search-filter-params-b">
            <el-checkbox-group
              v-model="checked"
              @change="checked => checkRow(checked)"
            >
              <el-checkbox
                v-for="item in checkList"
                :key="item.id"
                :label="item.id"
                >{{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <!-- 检索表达式 -->
        <div class="search-filter-title">检索表达式</div>
        <div class="search-filter-tips">
          <div class="search-filter-tips-text">
            <strong>表达式：</strong>
          </div>
          <div
            class="search-filter-tips-text"
            ref="hardBds"
            style="display:none"
          >
            <i v-for="item in checkList" :key="item.id">
              <span v-if="item.checked == true">{{ item.name }}=是 and </span>
            </i>
            <i v-for="lists in xdata" :key="lists.id">
              <i v-for="item in lists.children" :key="item.id">
                <span
                  v-if="
                    form[item.value] != undefined &&
                      form[item.value] != '' &&
                      item.type != 'checkbox' &&
                      item.type != 'radio' &&
                      item.type != 'datetime'
                  "
                  >{{ item.label }}='%{{ form[item.value] }}%' and
                </span>
                <span
                  v-if="
                    form[item.value] != undefined &&
                      form[item.value] != '' &&
                      item.type == 'datetime'
                  "
                  >{{ item.label }}=BETWEEN{{ form[item.value] }} and 
                </span>
                <span
                  v-if="
                    form[item.value] != undefined &&
                      form[item.value] != '' &&
                      item.type == 'radio'
                  "
                >
                  {{ item.label }}='{{ form[item.value] }}' and
                  <i
                    v-for="its in item.children.slice(2, item.children.length)"
                    :key="its.label"
                  >
                    <span
                      v-if="
                        form[its.value] != undefined &&
                          form[its.value] != '' &&
                          (form[item.value] == '是' || form[item.value] == '有')
                      "
                      >{{ its.label }}='%{{ form[its.value] }} %' and
                    </span>
                  </i>
                </span>
                <span
                  v-if="item.type == 'checkbox' && form[item.value].length > 0"
                  >{{ item.label }}='{{ form[item.value].toString() }}' and
                </span>
              </i>
            </i>
          </div>
          <div class="search-filter-tips-edit">
            <i class="fa fa-pencil-square-o" /><span>编辑</span>
          </div>
        </div>
      </div>
      <!-- 检索表单 -->
      <div class="search-content">
        <div
          class="search-more-btn"
          @click="Allshow"
          v-bind:class="{ you: flag, you2: !flag }"
        >
          <span>{{ qbzk }}</span
          ><i class="fa fa-angle-double-down" />
        </div>
        <el-tabs
          type="border-card"
          @tab-click="handleClick"
          v-model="hxactiveName"
        >
      <!-- 复审检索 -->
      <el-tab-pane label="复审" name="fushen"></el-tab-pane>
      <!-- 无效检索 -->
      <el-tab-pane label="无效" name="wuxiao"> </el-tab-pane>
      <!-- 外观检索 -->
      <el-tab-pane label="外观无效" name="waiguan"> </el-tab-pane>
      <!-- 司法判决检索 -->
      <el-tab-pane label="司法判决" name="susong"> </el-tab-pane> 
      </el-tabs>
      </div>
      <!-- 检索及清空 -->
      <div></div>
    </div>
  </div>
</template>

<script>
import { buildSearch, temList, temOne } from "@api/quick";
import { getkeywordTips } from "@api/other";
import fushenData from "@/utils/search-data/fushen";
import susongData from "@/utils/search-data/susong";
import waiguanData from "@/utils/search-data/waiguan";
import wuxiaoData from "@/utils/search-data/wuxiao";

export default {
  data() {
    return {
      hxactiveName: "fushen", //选项卡
      templateList: [], //模板列表
      tempValue: "", //模板表单
      fromData: [],
      // 检索类型
      checked: [0],
      checkList: [
        {
          id: 1,
          name: "十大案件",
          checked: false
        },
        {
          id: 2,
          name: "优秀案件",
          checked: false
        },
        {
          id: 3,
          name: "典型案例",
          checked: false
        },
        {
          id: 4,
          name: "质保优秀案件",
          checked: false
        }
      ],
      keyWord: "",
      restaurants: [],
      xdata: []
    };
  },
  created() {
    this.getList();
    this.restaurants = this.keywordTips();
    console.log(this.restaurants, "---this restaurants----");
  },
  methods: {
    //获取模板列表
    async getList() {
      let obj = {
        mobanlx: this.hxactiveName
      };
      try {
        const { code, data } = await temList(obj);
        if (code == 200) {
          this.$message.success("获取列表成功");
          this.templateList = data;
          this.templateList.unshift({
            mobanid: "0",
            mobanmc: "默认模板"
          });
          this.tempValue = "0";
        } else {
          this.$message.error("获取列表失败");
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 获取模板内容
    // async getTemplate() {
    //   this.fromData = [];
    //   let obj = {
    //     mobanid: this.tempValue
    //   };
    //   console.log(obj.mobanid);
    //   if (obj.mobanid == 0) {
    //     this.xdata = this.friXRdata.fushen.fromdata;
    //   } else {
    //     try {
    //       const { code, data } = await temOne(obj);
    //       if (code == 200) {
    //         this.$message.success("获取信息成功");
    //         this.xdata = [];
    //         this.xdata = JSON.parse(data.jiansuoxmb).todata;
    //         console.log(this.xdata);
    //       } else {
    //         this.$message.error("获取信息失败");
    //       }
    //     } catch (err) {
    //       console.log(err);
    //     }
    //   }
    // },
    skipTemp() {
      this.$router.push({
        path: "legal-question-search"
      });
    },
    // 关键词检索
    querySearchAsync(queryString, cb) {
      var restaurants = this.keywordTips();
      console.log(restaurants, "===========");
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [
        { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
        {
          value: "Hot honey 首尔炸鸡（仙霞路）",
          address: "上海市长宁区淞虹路661号"
        },
        {
          value: "鲜果榨汁（金沙江路和美广店）",
          address: "普陀区金沙江路2239号金沙和美广场B1-10-6"
        }
      ];
    },
    keywordTips() {
      const param = {
        keyword: "hot"
      };
      let keyWord = "";
      getkeywordTips(param).then(res => {
        console.log(res.data);
        keyWord = res.data;
      });
      return keyWord;
    },
    handleKeyWordSelect(item) {
      console.log(item, "-------this");
    },
    //高级搜索下面的点击时间
    checkRow(arr) {
      console.log(arr);
      for (let i = 0; i < this.checkList.length; i++) {
        if (arr.indexOf(this.checkList[i].id) != -1) {
          this.checkList[i].checked = true;
        } else {
          this.checkList[i].checked = false;
        }
        this.$forceUpdate();
      }
      console.log("改变了，改变了");
    }
  },
  mounted() {
    this.restaurants = this.keywordTips();
    console.log(this.restaurants, "---this restaurants");
  }
};
</script>

<style lang="scss">
$main-color: #303133;
$blue-color: #2d54b8;
$border-color: #dcdfe6;

.search-content {
  .el-form-item__label {
    font-size: 14px;
  }

  .el-tabs--border-card {
    border: 0;
    border-radius: 6px;
    box-shadow: none;
  }

  .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    border: 1px solid $border-color;
    margin-top: 0;
    color: $blue-color;
    border-radius: 6px 6px 0 0;
    margin-right: 10px;
    border-bottom: 0;
    background-color: #ebeef5;
    font-size: 16px;
  }

  .el-tabs--border-card > .el-tabs__header {
    background-color: #f7f7f7;
    margin-top: -1px;
    border-bottom: 1px solid $border-color;
  }

  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: $main-color;
    background-color: #fff;
  }

  .el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item,
  .el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
    margin-left: 0;
  }

  .el-tabs--border-card > .el-tabs__content {
    border-left: 1px solid $border-color;
    border-right: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
    padding: 20px;
  }
}

.search-filter-params-b {
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: $blue-color;
    border-color: $blue-color;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: $main-color;
  }

  .el-checkbox__label {
    font-size: 14px;
  }
}

.search-content {
  .search-form {
    margin-top: 20px;
  }

  .el-collapse {
    border: 0;
  }

  .search-item {
    .el-collapse-item__wrap {
      border-bottom: 0;
    }

    .el-collapse-item__content {
      padding-bottom: 0;
    }

    .el-collapse-item__header {
      height: 50px;
      line-height: 50px;
      background-color: #ebeef5;
      color: #303133;
      cursor: pointer;
      border-bottom: 0;
      font-size: 18px;
      font-weight: 700;
      padding-left: 14px;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 17px;
        z-index: 1;
        width: 4px;
        height: 16px;
        background-color: $blue-color;
      }
    }
  }

  .el-input__inner {
    height: 36px;
    line-height: 36px;
    border: 1px solid $border-color;
    background-color: #fafafa;
    font-size: 14px;
  }

  .el-date-editor .el-range-input,
  .el-date-editor .el-range-separator {
    background-color: #fafafa;
    font-size: 14px;
  }

  .el-date-editor .el-range-input {
    width: 43%;
  }

  .el-checkbox__inner,
  .el-radio__inner {
    width: 18px;
    height: 18px;
  }

  .el-checkbox__inner::after {
    left: 6px;
    top: 2px;
  }
}

.search-submit-btn {
  .el-form-item__content {
    font-size: 14px;
    text-align: center;
    margin: 0 auto !important;
  }

  .el-button {
    padding: 10px 12px;
    font-size: 14px;
    color: $main-color;

    i {
      margin-right: 10px;
    }
  }

  .el-button--primary {
    background-color: $blue-color;
    border-color: $blue-color;
    padding-left: 80px;
    padding-right: 80px;
    color: #ffffff;

    &:focus,
    &:hover {
      background: #66b1ff;
      border-color: #66b1ff;
      color: #fff;
    }
  }
}
</style>
<style lang="scss" scoped>
$main-color: #303133;
$blue-color: #2d54b8;
$border-color: #dcdfe6;

.el-select-dropdown__item {
  font-size: 14px;
}

.search-wrapper,
button,
input,
optgroup,
select,
textarea {
  font-family: "PingFang SC", Microsoft YaHei, Arial, sans-serif !important;
}

.search-wrapper {
  margin: 0 auto;
  width: 1200px;
  overflow: hidden;
  color: $main-color;
  font-size: 14px;
}

.search-title {
  margin-top: 20px;
  overflow: hidden;

  .search-title-l {
    font-size: 22px;
    float: left;
  }

  .search-title-r {
    float: right;

    .earch-title-label {
    }

    .el-button {
      margin-left: 20px;

      i {
        margin-right: 10px;
        font-size: 14px;
      }
    }

    .el-button--medium {
      padding: 10px 12px;
    }
  }
}

.search-filter {
  margin-top: 15px;
  background-color: #ffffff;
  border: 1px solid $border-color;
  border-radius: 6px;
  padding: 20px;

  .search-filter-title {
    font-size: 18px;
    font-weight: 700;
    position: relative;
    height: 16px;
    line-height: 16px;
    padding-left: 14px;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      width: 4px;
      height: 100%;
      background-color: $blue-color;
    }
  }

  .search-filter-params {
    margin: 20px 0 0 14px;
    overflow: hidden;

    .search-filter-params-t {
      .el-autocomplete {
        margin-right: 12px;
        width: 60%;
      }

      .el-button {
        margin: 0 20px 0 0;
        padding: 10px 12px;
        font-size: 14px;
      }

      .el-button--primary {
        background-color: $blue-color;

        &:focus,
        &:hover {
          background: #66b1ff;
          border-color: #66b1ff;
        }
      }

      i {
        margin-right: 10px;
      }
    }

    .search-filter-params-b {
      margin: 18px 0 20px 0;

      .el-checkbox {
        margin-right: 40px;
      }
    }
  }

  .search-filter-tips {
    margin-top: 10px;
    background-color: #ebeef5;
    color: $blue-color;
    // height: 54px;
    line-height: 24px;
    padding: 10px 20px;

    .search-filter-tips-text {
      // float: left;
      display: inline-block;
      width: 92%;
      // min-height:40px;
    }

    .search-filter-tips-edit {
      float: right;
      color: $blue-color;
      cursor: pointer;

      i {
        margin-right: 12px;
        font-size: 14px;
      }

      &:hover,
      &:focus {
        color: #66b1ff;
      }
    }
  }
}

.search-content {
  position: relative;

  .search-more-btn {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    color: $blue-color;
    font-size: 14px;

    i {
      margin-left: 10px;
      font-size: 14px;
    }
  }
}

.search-content {
  margin-top: 20px;

  .el-form-item {
    min-height: 40px;
    margin-bottom: 18px;
  }

  .el-form-item__label,
  .el-input__inner,
  .el-checkbox__label,
  .el-radio__label {
    font-size: 14px;
    color: $main-color;
  }

  .el-range-editor.el-input__inner {
    width: 100%;
  }
}

.search-body {
  margin: 0 0 10px 0;

  .search-submit-btn {
    margin-bottom: -10px;
  }

  .search-item {
    margin-bottom: 20px;
  }
}
</style>
